(function(){
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    //
    context.fillStyle = "#000000";
    context.fillRect(0, 0, 500, 500);

    var ships = new Image();
    ships.src = '../image/tanks_sheet.png';

    var i = 1;
    ships.onload = function(){
        draw(context, ships);
        // golop();
    };

    function golop(){
        window.setTimeout(golop);
        i++;
        draw(context, ships, i);
    }

})();

function draw(context, ships){

    context.fillStyle = "#000000";
    context.fillRect(0, 0, 500, 500);

    var mapIndexOffset = -1;
    var mapRows = 10;
    var mapCols = 10;

    var tiledMap = [
        [1,1,1,1,1,1,1,1,1,1],
        [1,0,0,31,31,31,31,0,0,1],
        [1,0,0,0,0,0,0,0,0,1],
        [1,26,26,0,26,0,26,26,26,1],
        [1,28,28,0,0,0,0,28,28,1],
        [1,0,0,0,28,28,0,0,0,1],
        [1,28,0,32,32,32,32,28,0,1],
        [1,28,0,32,24,24,32,28,0,1],
        [1,0,0,32,24,24,32,0,0,1],
        [1,1,1,1,1,1,1,1,1,1]
    ];

    for (var rowCtr = 0; rowCtr < mapRows; rowCtr++) {
        for (var colCtr = 0; colCtr < mapCols; colCtr++) {
            var tileId = tiledMap[rowCtr][colCtr] + mapIndexOffset;
            var sourceX = Math.floor(tileId % 8) * 32;
            var sourceY = Math.floor(tileId / 8) * 32;
            context.drawImage(ships, sourceX, sourceY, 32, 32, colCtr*32, rowCtr*32, 32, 32);
        }
    }
}